<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>遗嘱书</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
    }

    body {
      background-color: #F5F5F5;
      color: #333333;
      min-height: 100vh;
      line-height: 1.6;
    }

    /* 顶部导航栏 */
    .header {
      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
      color: white;
      padding: 20px;
      position: relative;
      min-height: 80px;
      display: flex;
      align-items: center;
      box-shadow: 0 4px 20px rgba(33, 150, 243, 0.3);
    }

    .back-btn {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
    }

    .back-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateY(-50%) scale(1.1);
    }

    .header-title {
      font-size: 20px;
      font-weight: 600;
      text-align: center;
      flex: 1;
      letter-spacing: 0.5px;
    }

    /* 内容区域 */
    .content-container {
      background-color: white;
      margin: 0;
      padding: 25px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      border-radius: 0;
      min-height: calc(100vh - 80px);
    }

    /* 标题区域 */
    .title-section {
      text-align: center;
      margin-bottom: 30px;
      padding: 20px;
      background-color: #F8F9FA;
      border-radius: 12px;
      border: 2px solid #E0E0E0;
    }

    .main-title {
      font-size: 24px;
      font-weight: 700;
      color: #333;
      margin-bottom: 15px;
      letter-spacing: 1px;
    }

    .subtitle {
      font-size: 18px;
      font-weight: 500;
      color: #666;
      margin-bottom: 20px;
    }

    /* 内容文本 */
    .content-text {
      font-size: 16px;
      color: #333;
      line-height: 1.8;
      margin-bottom: 20px;
      text-align: left;
    }

    .highlight-text {
      color: #E53E3E;
      font-weight: 600;
    }

    /* 流程说明区域 */
    .flow-section {
      margin: 30px 0;
      padding: 20px;
      background-color: #F8F9FA;
      border-radius: 12px;
      border-left: 4px solid #2196F3;
    }

    .flow-title {
      font-size: 20px;
      font-weight: 600;
      color: #333;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
    }

    .flow-title::before {
      content: '';
      width: 4px;
      height: 20px;
      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
      border-radius: 2px;
      margin-right: 10px;
    }

    .flow-subtitle {
      font-size: 18px;
      font-weight: 500;
      color: #333;
      margin-bottom: 10px;
    }

    /* 步骤列表 */
    .step-list {
      list-style: none;
      padding: 0;
    }

    .step-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20px;
      padding: 15px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .step-number {
      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
      color: white;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 14px;
      margin-right: 15px;
      flex-shrink: 0;
    }

    .step-content {
      flex: 1;
    }

    .step-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
    }

    .step-description {
      font-size: 14px;
      color: #666;
      line-height: 1.6;
    }

    /* Logo区域 */
    .logo-section {
      text-align: center;
      margin: 40px 0;
    }

    .logo {
      font-size: 32px;
      font-weight: 300;
      color: #999;
      letter-spacing: 2px;
    }

    /* 底部按钮 */
    .bottom-button {
      position: fixed;
      bottom: 20px;
      left: 20px;
      right: 20px;
      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
      color: white;
      border: none;
      border-radius: 25px;
      padding: 18px 20px;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 20px rgba(33, 150, 243, 0.3);
    }

    .bottom-button:hover {
      background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
      transform: translateY(-2px);
      box-shadow: 0 6px 25px rgba(33, 150, 243, 0.4);
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .header {
        padding: 15px;
        min-height: 70px;
      }

      .header-title {
        font-size: 18px;
      }

      .content-container {
        margin: 0;
        padding: 20px;
      }

      .main-title {
        font-size: 20px;
      }

      .subtitle {
        font-size: 16px;
      }

      .content-text {
        font-size: 15px;
      }

      .flow-title {
        font-size: 18px;
      }

      .flow-subtitle {
        font-size: 16px;
      }

      .step-item {
        padding: 12px;
      }

      .step-title {
        font-size: 15px;
      }

      .step-description {
        font-size: 13px;
      }

      .bottom-button {
        padding: 16px 20px;
        font-size: 16px;
      }

      .logo {
        font-size: 28px;
      }
    }
  </style>
</head>

<body>
  <!-- 顶部导航栏 -->
  <div class="header">
    <button class="back-btn" id="backBtn">
      ←
    </button>
    <div class="header-title">遗嘱书</div>
  </div>

  <!-- 内容区域 -->
  <div class="content-container">
    <!-- 标题区域 -->
    <div class="title-section">
      <div class="main-title">遗嘱书</div>
      <div class="subtitle">什么是遗嘱书</div>
    </div>

    <!-- 内容文本 -->
    <div class="content-text">
      遗嘱书的作成有两大作用。
    </div>

    <div class="content-text">
      <strong>1. 按照自己的意愿处理财产</strong><br>
      如果没有遗嘱书，继承将根据继承人之间的协商或法定份额决定，无法反映死者的意愿。通过遗嘱书，可以确保按照自己的意愿进行继承。
    </div>

    <div class="content-text">
      <strong>2. 避免被继承人死后产生纠纷</strong><br>
      如果没有遗嘱书，继承人之间经常发生纠纷。通过遗嘱书，可以明确财产分配，避免死后产生纠纷和问题。
    </div>

    <div class="content-text">
      遗嘱书的写法有一定的要求，如果不满足这些要求，可能会变得无效。通过咨询和委托负责律师，可以确保遗嘱的有效性，并根据遗嘱人的具体情况制定符合法律要求的遗嘱书，避免将来的纠纷。
    </div>

    <!-- 流程说明区域 -->
    <div class="flow-section">
      <div class="flow-title">使用流程</div>
      <div class="flow-subtitle">如果活的使用方法</div>

      <ul class="step-list">
        <li class="step-item">
          <div class="step-number">1</div>
          <div class="step-content">
            <div class="step-title">从应用咨询</div>
            <div class="step-description">按下屏幕上的咨询按钮，请填写必要信息。稍后，负责人会与您联系。</div>
          </div>
        </li>

        <li class="step-item">
          <div class="step-number">2</div>
          <div class="step-content">
            <div class="step-title">介绍负责律师</div>
            <div class="step-description">如果活将为您介绍负责律师，并创建合同。</div>
          </div>
        </li>

        <li class="step-item">
          <div class="step-number">3</div>
          <div class="step-content">
            <div class="step-title">继承人・继承财产调查</div>
            <div class="step-description">获取遗嘱书作成者出生以来的户籍等，收集继承财产的相关资料，进行继承人及继承财产的调查・确认。</div>
          </div>
        </li>

        <li class="step-item">
          <div class="step-number">4</div>
          <div class="step-content">
            <div class="step-title">遗嘱书案的作成</div>
            <div class="step-description">与遗嘱人进行商议，听取遗嘱人的意愿，根据法律制作适当的遗嘱书案。</div>
          </div>
        </li>

        <li class="step-item">
          <div class="step-number">5</div>
          <div class="step-content">
            <div class="step-title">公证遗嘱的作成</div>
            <div class="step-description">与遗嘱人一起前往公证处，制作公证遗嘱。公证遗嘱的原本由公证处保管，公证遗嘱的正本根据遗嘱人的希望在本事务所保管。</div>
          </div>
        </li>
      </ul>
    </div>

    <!-- Logo区域 -->
    <div class="logo-section">
      <div class="logo">logo</div>
    </div>
  </div>

  <!-- 底部按钮 -->
  <button class="bottom-button" id="inquireBtn">咨询</button>

  <script>
    // 返回按钮点击事件
    document.getElementById('backBtn').addEventListener('click', function () {
      // 检查URL参数判断来源页面
      const urlParams = new URLSearchParams(window.location.search);
      const from = urlParams.get('from');

      if (from === 'menu') {
        window.location.href = '菜单对话框.html';
      } else {
        window.location.href = '主页.html';
      }
    });

    // 咨询按钮点击事件
    document.getElementById('inquireBtn').addEventListener('click', function () {
      alert('咨询功能');
    });
  </script>
</body>

</html>